
// 去除按钮默认样式
@mixin clearBtn{
    border: 0;
    background-color: transparent;
    outline: none;
}

// 图片居中显示
@mixin imgCenter{
    width:50%;
    height: 50%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    &>img{
        width:100%;
    }
}

    
#home {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    color: #2c3e50;
    // 头部
    #header {
        height: 120px;
        width: 1200px;
        margin: 0 auto;
        display: flex;
        // logo
        .header-left {
            flex: 1;
            position: relative;
            .header-imgdiv {
                position: absolute;
                // logo
                @include imgCenter;
                width:100%;
                height: 30%;
            }
        }
        // 搜索栏
        .header-middle {
            flex: 4;
            .middle-con {
                width: 100%;
                margin-top: 20px;
                .middle-input {
                    padding-left: 8%;
                    // 静态按钮样式
                    .middle-btn1,.middle-btn2 {
                        @include clearBtn;
                        width: 44px;
                        height: 22px;
                        color:#ED3A29;
                    }
                    // 点击的按钮样式
                    .btn1 {
                        color: #fff;
                        border-top-left-radius: 5px;
                        border-top-right-radius: 5px;
                        background:linear-gradient(90deg,rgba(217,46,30,1),rgba(255,86,43,1));
                    }
                }
                // 搜索框
                .middle-search {
                    width: 90%;
                    height: 40px;
                    margin: 0 auto;
                    border: 2px solid #ED3A29;
                    border-radius: 44px;
                    position: relative;
                    .search-input-con {
                        // 输入框
                        .search-text {
                            position: absolute;
                            top: 0;
                            left: 0;
                            @include clearBtn;
                            width: 660px;
                            height: 40px;
                            line-height: 40px;
                            padding-left: 20px;
                        }
                        // 右边按钮
                        .search-btn {
                            position: absolute;
                            top: -1px;
                            left: 89%;
                            @include clearBtn;
                            width: 80px;
                            height: 42px;
                            line-height: 42px;
                            color: #fff;
                            background-color: #ED3A29;
                            border-bottom-right-radius: 20px;
                            border-top-right-radius: 20px;
                        }
                    }
                    .search-btn-span {
                        position: absolute;
                        top: -1px;
                        right: 0;
                        width: 22px;
                        height: 42px;
                        background-color: #ED3A29;
                        border-bottom-right-radius: 21px;
                        border-top-right-radius: 21px;
                    }
                }
                // 输入框下的文本
                .middle-text {
                    width: 100%;
                    height: 30px;
                    padding-left: 8%;
                    font-size: 12px;
                    cursor: pointer;
                    &>span {
                        display: inline-block;
                        width: 40px;
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                        &>a {
                            color: #666;
                        }
                        &>a:hover {
                            color: #ED3A29;
                        }
                    }
                    .middle-text1 {
                        width: 60px;
                    }
                }
            }
        }
        // 登录注册部分
        .header-right {
            flex: 1;
            // 没有注册时
            .header-right-con {
                float: right;
                width: 224px;
                height: 40px;
                padding-top: 45px;
                // 按钮部分
                .login-btn,
                .register-btn {
                    @include clearBtn;
                    width: 100px;
                    height: 40px;
                    color: #fff;
                }
                .login-btn {
                    // background-color: orangered;
                    background:linear-gradient(90deg,rgba(217,46,30,1),rgba(255,86,43,1));
                }
                .register-btn {
                    margin-left: 10px;
                    color: orangered;
                    border: 1px solid orangered;
                }
            }
            // 个人中，已登录部分
            .header-right-login {
                float: right;
                width: 224px;
                height: 60px;
                padding-top: 40px;
                position: relative;
                display: flex;
                z-index: 100;
                // 头像
                .right-right-div {
                    flex: 1;
                }
                .right-login-img {
                    flex: 1;
                    position: relative;
                    .login-img-con {
                        border: 1px solid #eee;
                        position: absolute;
                        width: 50px;
                        height: 50px;
                        border-radius: 60px;
                        overflow: hidden;
                        &>img {
                            @include imgCenter;
                            width:100%;
                            height: 100%;
                        }
                    }
                }
                // 手机号码
                .right-login-num {
                    flex: 2;
                    height: 30px;
                    line-height: 30px;
                    margin-top: 15px;
                }
                // 个人中心列表
                .header-login-list {
                    width: 135px;
                    height: 80px;
                    position: absolute;
                    top: 100px;
                    left: 65px;
                    text-align: center;
                    background: #fff;
                    box-shadow: 2px 2px 5px #ccc;
                    border: 1px solid #eee;
                    display: none;
                    .login-list-con1,
                    .login-list-con2 {
                        height: 40px;
                        line-height: 40px;
                        background: #fff;
                        font-size: 14px;
                        font-weight: bold;
                        box-sizing: border-box;
                    }
                    &>div:hover {
                        background: #eee;
                    }
                }
                // 三角形
                .login-triangle-con{
                    position: absolute;
                    top:95px;
                    left:81px;
                    width: 0;
                    height: 0;
                    border-left: 6px solid transparent;
                    border-bottom: 6px solid #efefef;
                    border-right: 6px solid transparent;
                    display: none;
                }
            }
            // 
            .header-right-login:hover .header-login-list {
                display: block;
            }
            .header-right-login:hover .login-triangle-con {
                display: block;
            }
        }
    }
    // 导航栏
    #nav {
        width: 100%;
        .nav-bottom {
            width: 100%;
            border-bottom: 1px solid #ED3A29;
            font-family: 'MicrosoftYaHei';
            font-weight: bold;
            .nav-con {
                width: 1200px;
                height: 53px;
                line-height: 50px;
                text-align: center;
                font-size: 16px;
                margin: 0 auto;
                .nav-son {
                    width: 90px;
                    float: left;
                    margin-right: 40px;
                    box-sizing: border-box;
                }
                .textbottom {
                    box-sizing: border-box;
                    border-bottom: 3px solid #ED3A29;
                    color: #ED3A29;
                }
            }
        }
        // 全网商品分类
        .nav-con2 {
            width: 100%;
            .nav-all-con {
                width: 1200px;
                margin: 0 auto;
                padding-top: 10px;
                .nav-all-list {
                    .all-list-title {
                        width: 6%;
                        height: 80px;
                        float: left;
                        font-size: 16px;
                        color: #666;
                        font-weight: bold;
                    }
                    .all-list-con {
                        width: 94%;
                        height: 80px;
                        float: left;
                        font-size: 0;
                        transition: all 1s;
                        &>span {
                            width: 90px;
                            height: 30px;
                            display: inline-block;
                            font-size: 12px;
                            color: #666;
                            padding-top: 3px;
                            cursor: pointer;
                        }
                        &>span:hover {
                            color: #ED3A29;
                        }
                    }
                }
                .nav-all-check {
                    .all-check-title {
                        width: 6%;
                        height: 50px;
                        line-height: 50px;
                        float: left;
                        font-size: 16px;
                        color: #666;
                        font-weight: bold;
                    }
                    .all-check-con {
                        width: 94%;
                        height: 50px;
                        padding-top: 8px;
                        display: flex;
                        font-size: 12px;
                        .nav-price,
                        .nav-quan,
                        .nav-bili,
                        .nav-sales,
                        .nav-input {
                            &>input {
                                border: 0;
                                width: 70px;
                                height: 30px;
                                border: 1px solid #ccc;
                                border-radius: 1px;
                                margin-left: 10px;
                                margin-right: 10px;
                                color: #666;
                                padding-left:10px;
                            }
                        }
                        .nav-price {
                            flex: 5;
                            &>input {
                                margin-right: 0 5px;
                            }
                        }
                        .nav-quan,.nav-bili,.nav-sales,.nav-right {
                            flex: 4;
                        }
                        .nav-input {
                            flex: 2;
                            .input-con {
                                &>input {
                                    width: 80px;
                                    height: 35px;
                                    border-radius: 3px;
                                    background: #ED3A29;
                                    color: #fff;
                                    @include clearBtn;
                                    background: #ED3A29;
                                }
                            }
                        }
                    }
                }
            }
        }
        // 全网分类标题
        .nav-allweb-list {
            width: 100%;
            background: #f5f5f5;
            .nav-allweb-top {
                width: 100%;
                height: 15px;
                margin-top: 10px;
            }
            .allweb-list-con {
                width: 100%;
                background: #fff;
                .allweb-all {
                    width: 1200px;
                    margin: 0 auto;
                    display: flex;
                    &>div {
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                        font-size: 14px;
                        font-weight: 700;
                        color: #666;
                    }
                    .allweb-list-sales,.allweb-list-right {
                        flex: 1;
                    }
                    .textbottom2 {
                        color: #ED3A29;
                    }
                    .textbottom2::after {
                        display: block;
                        content: "";
                        border-top: 2px solid #ED3A29;
                        width: 60%;
                        margin: -5px auto 0;
                    }
                }
            }
        }
    }
    // 产品内容
    .product-bottom-page{
        height: 150px;
        width:1200px;
        margin: 0 auto;
        .bottom-page{
            width:600px;
            height: 100px;
            margin-left: 400px;
            margin-top:30px;
        }
    }
}

// 个人中心动画
@keyframes person {
    0% {
        height: 0px;
    }
    100% {
        height: 100px;
    }
}

// 媒体查询部分
@media screen and (min-width:1200px) {
    #header {
        width: 1400px;
        // background: green;
    }
}

@media screen and (min-width:992px) and (max-width:1200px) {
    #header {
        width: 900px;
        background: skyblue;
    }
}

@media screen and (max-width:900px) {
    #header {
        background: pink;
    }
}




.icon-xiazai:before,.icon-guanji:before {
    font-size: 18px;
    font-weight: bold;
}

// 热门搜索下标
.topNavClass{
    color:orangered !important;
}

// 全网分类下标样式
.colorred{
    color:orangered !important;
}